.box{
    width: 100px;
    height: 100px;
    background-color: #f2f2f2;
    transition: width 2s ease-out;
    /* background-image: linear-gradient(#e66465, #9198e5); */
}
/* .box:hover
{
    width:300px;
} */
.trans{
    /* transform: translate(50px,100px); */
    transform:scale(2,3);
}
@keyframes move{
    
}

.colorChange{
    animation: colorChange 3s forwards;
    animation-iteration-count: 1;
}
@keyframes colorChange
{
    /* from {background: red;}
    to {background: yellow;} */
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
 